import { useState } from 'react'
import { Descriptions, Avatar, Upload, Button, Modal, Form, Input, message } from 'antd'
import { UserOutlined, EditOutlined, CameraOutlined } from '@ant-design/icons'

const mockData = {
  username: 'testuser',
  nickname: '魔法使',
  level: 'VIP1',
  magicValue: '1500 MV',
  uploaded: '500 GB',
  downloaded: '200 GB',
  ratio: '2.5',
  createdAt: '2023-01-01',
  avatar: 'https://randomuser.me/api/portraits/women/72.jpg'
}

const Profile = () => {
  const [form] = Form.useForm()
  const [data, setData] = useState(mockData)
  const [visible, setVisible] = useState(false)

  // 模拟头像上传
  const handleUpload = info => {
    if (info.file.status === 'done') {
      setData({...data, avatar: URL.createObjectURL(info.file.originFileObj)})
      message.success('头像上传成功')
    }
  }

  // 处理昵称修改
  const handleNickname = values => {
    setData({...data, nickname: values.nickname})
    setVisible(false)
    message.success('昵称修改成功')
  }

  return (
    <div className="profile-container">
      {/* 头像编辑区域 */}
      <div className="avatar-section">
        <Avatar 
          size={128}
          src={data.avatar}
          icon={<UserOutlined />}
          className="profile-avatar"
        />
        <Upload
          name="avatar"
          showUploadList={false}
          beforeUpload={() => false}
          onChange={handleUpload}
          className="avatar-upload"
        >
          <Button 
            icon={<CameraOutlined />} 
            shape="circle" 
            className="upload-button"
          />
        </Upload>
      </div>

      {/* 基本信息区域 */}
      <Descriptions 
        bordered 
        column={1}
        className="profile-info"
        extra={
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => setVisible(true)}
          >
            编辑资料
          </Button>
        }
      >
        <Descriptions.Item label="用户名">{data.username}</Descriptions.Item>
        <Descriptions.Item label="昵称">
          <span className="nickname">{data.nickname}</span>
        </Descriptions.Item>
        <Descriptions.Item label="用户等级">{data.level}</Descriptions.Item>
        <Descriptions.Item label="魔力值">{data.magicValue}</Descriptions.Item>
        <Descriptions.Item label="分享率">
          {data.uploaded}/{data.downloaded} ({data.ratio})
        </Descriptions.Item>
        <Descriptions.Item label="注册时间">{data.createdAt}</Descriptions.Item>
      </Descriptions>

      {/* 昵称修改模态框 */}
      <Modal
        title="修改昵称"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{ nickname: data.nickname }}
          onFinish={handleNickname}
        >
          <Form.Item
            name="nickname"
            label="新昵称"
            rules={[
              { required: true, message: '请输入新昵称' },
              { max: 16, message: '昵称最长16个字符' }
            ]}
          >
            <Input placeholder="请输入2-16个字符的昵称" />
          </Form.Item>
          <Button type="primary" htmlType="submit">
            保存修改
          </Button>
        </Form>
      </Modal>
    </div>
  )
}

export default Profile